<!DOCTYPE html>
<html lang="utf-8">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    <title>摄影圈 </title>
    <link rel="stylesheet"  href="css/new.css" />
    <link rel="stylesheet" href="css/home.css"/>
    <link rel="stylesheet" href="css/login.css" />
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script type="text/javascript" src="js/home.js"></script>
</head>
<body>
<header>
    <%include header.ejs%>
    <div class="container">
        <div class="card text-center">
            <div>
                <p>CRE<br>ATIV<br>ITY.</p>
            </div>
            <a href="#services" class="scrollto">
                <i class="fa fa-angle-down" aria-hidden="true"></i></a>
        </div>
    </div>
</header>

<section id="services">
    <div class="container">
        <div class="title">
            <h4 class="text-center">最新资讯</h4>
            <div></div>
        </div>
        <div class="row">
            <div class="newsBox wrapper">
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="newsList2 newsList">
                        <a class="titBig" href="#" title="国内新闻">国内新闻</a>
                        <ul class="list clearfix" id="newBoxOne">
                            <div id="newLoading">新闻正在加载中...</div>
                        </ul>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="newsList2 newsList">
                        <a class="titBig" href="#" title="娱乐新闻">娱乐新闻</a>
                        <ul class="list clearfix" id="newBoxTwo">
                            <div id="newLoading2">新闻正在加载中...</div>
                        </ul>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="newsList2 newsList">
                        <a class="titBig" href="#" title="国际新闻">国际新闻</a>
                        <ul class="list clearfix" id="newBoxThree">
                            <div id="newLoading3">新闻正在加载中...</div>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="portfolio">
    <div class="title">
        <h4 class="text-center">佳作欣赏</h4>
        <div></div>
    </div>
    <div class="container-fluid masonry-wrapper scrollimation fade-in in">
        <div id="projects-container" class="masonry">
            <a class="project-item masonry-brick" data-images="/system/comfy/cms/files/files/000/000/019/original/10.jpg,/system/comfy/cms/files/files/000/000/018/original/10-1.jpg,/system/comfy/cms/files/files/000/000/017/original/10-2.jpg">
                <img class="img-responsive project-image" src="img/photo/6.jpg" alt="">
                <div class="hover-mask">
                    <h2 class="project-title">途家盛捷服务公寓</h2>
                    <p>品牌（LOGO/VI）</p>
                </div>
                <div class="sr-only project-description">
                    品牌（LOGO/VI）
                </div>
            </a>

            <a class="project-item masonry-brick" data-images="/system/comfy/cms/files/files/000/000/030/original/9-3.jpg,/system/comfy/cms/files/files/000/000/029/original/9-5.jpg,/system/comfy/cms/files/files/000/000/028/original/9-6.jpg">
                <img class="img-responsive project-image" src="img/photo/4.jpg" alt="">
                <div class="hover-mask">
                    <h2 class="project-title">MODELAB/爱慕内衣</h2>
                    <p>品牌（LOGO/VI）</p>
                </div>
                <div class="sr-only project-description">
                    品牌（LOGO/VI）
                </div>
            </a>

            <a class="project-item masonry-brick" data-images="/system/comfy/cms/files/files/000/000/033/original/8_.jpg,/system/comfy/cms/files/files/000/000/036/original/8-1.jpg,/system/comfy/cms/files/files/000/000/035/original/8-3.jpg,/system/comfy/cms/files/files/000/000/034/original/8-4.jpg,/system/comfy/cms/files/files/000/000/037/original/8-5.jpg">
                <img class="img-responsive project-image" src="img/photo/1.jpg" alt="">
                <div class="hover-mask">
                    <h2 class="project-title">觉</h2>
                    <p>品牌（LOGO/VI）</p>
                </div>
                <div class="sr-only project-description">
                    品牌（LOGO/VI）
                </div>
            </a>

            <a class="project-item masonry-brick" data-images="/system/comfy/cms/files/files/000/000/041/original/11.jpg,/system/comfy/cms/files/files/000/000/040/original/11-1.jpg,/system/comfy/cms/files/files/000/000/038/original/11-2.jpg,/system/comfy/cms/files/files/000/000/039/original/11-3.jpg">
                <img class="img-responsive project-image" src="img/photo/10.jpg" alt="">
                <div class="hover-mask">
                    <h2 class="project-title">CNZCO兴宇中科</h2>
                    <p>品牌（LOGO/VI）</p>
                </div>
                <div class="sr-only project-description">
                    品牌（LOGO/VI）
                </div>
            </a>

            <a class="project-item masonry-brick" data-images="/system/comfy/cms/files/files/000/000/044/original/5-2.jpg,/system/comfy/cms/files/files/000/000/043/original/5-1.jpg">
                <img class="img-responsive project-image" src="img/photo/11.jpg" alt="">
                <div class="hover-mask">
                    <h2 class="project-title">同仁堂保健酒</h2>
                    <p>包装</p>
                </div>
                <div class="sr-only project-description">
                    包装
                </div>
            </a>

            <a class="project-item masonry-brick" data-images="/system/comfy/cms/files/files/000/000/045/original/13.jpg,/system/comfy/cms/files/files/000/000/100/original/13-1.jpg">
                <img class="img-responsive project-image" src="img/photo/12.jpg" alt="">
                <div class="hover-mask">
                    <h2 class="project-title">伊利乳品</h2>
                    <p>包装</p>
                </div>
                <div class="sr-only project-description">
                    包装
                </div>
            </a>
            <a class="project-item masonry-brick" data-images="/system/comfy/cms/files/files/000/000/048/original/4.jpg,/system/comfy/cms/files/files/000/000/046/original/4-1.jpg,/system/comfy/cms/files/files/000/000/047/original/4-2.jpg,/system/comfy/cms/files/files/000/000/101/original/4-3.jpg,/system/comfy/cms/files/files/000/000/102/original/4-4.jpg,/system/comfy/cms/files/files/000/000/103/original/4-5.jpg">
                <img class="img-responsive project-image" src="img/photo/13.jpg" alt="">
                <div class="hover-mask">
                    <h2 class="project-title">雀巢咖啡</h2>
                    <p>包装</p>
                </div>
                <div class="sr-only project-description">
                    包装
                </div>
            </a>

            <a class="project-item masonry-brick" data-images="/system/comfy/cms/files/files/000/000/139/original/15-1.jpg,/system/comfy/cms/files/files/000/000/138/original/15-2.jpg,/system/comfy/cms/files/files/000/000/137/original/15-3.jpg,/system/comfy/cms/files/files/000/000/136/original/15-4.jpg">
                <img class="img-responsive project-image" src="img/photo/16.jpg" alt="">
                <div class="hover-mask">
                    <h2 class="project-title">雀巢礼盒</h2>
                    <p>包装</p>
                </div>
                <div class="sr-only project-description">
                    包装
                </div>
            </a>

            <a class="project-item masonry-brick" data-images="/system/comfy/cms/files/files/000/000/128/original/14-1.jpg,/system/comfy/cms/files/files/000/000/129/original/14-2.jpg,/system/comfy/cms/files/files/000/000/130/original/14-3.jpg,/system/comfy/cms/files/files/000/000/131/original/14-4.jpg,/system/comfy/cms/files/files/000/000/132/original/14-5.jpg">
                <img class="img-responsive project-image" src="img/photo/5.jpg" alt="">
                <div class="hover-mask">
                    <h2 class="project-title">雀巢广告</h2>
                    <p>广告</p>
                </div>
                <div class="sr-only project-description">
                    广告
                </div>
            </a>

            <a class="project-item masonry-brick" data-images="/system/comfy/cms/files/files/000/000/124/original/16-1.jpg,/system/comfy/cms/files/files/000/000/125/original/16-2.jpg,/system/comfy/cms/files/files/000/000/126/original/16-3.jpg">
                <img class="img-responsive project-image" src="img/photo/2.jpg" alt="">
                <div class="hover-mask">
                    <h2 class="project-title">沃尔沃</h2>
                    <p>广告</p>
                </div>
                <div class="sr-only project-description">
                    广告
                </div>
            </a>

            <a class="project-item masonry-brick" data-images="/system/comfy/cms/files/files/000/000/050/original/3-1.jpg,/system/comfy/cms/files/files/000/000/051/original/3-2.jpg">
                <img class="img-responsive project-image" src="img/photo/7.jpg" alt="">
                <div class="hover-mask">
                    <h2 class="project-title">黑猫神蚊香</h2>
                    <p>广告</p>
                </div>
                <div class="sr-only project-description">
                    广告
                </div>
            </a>

            <a class="project-item masonry-brick" data-images="/system/comfy/cms/files/files/000/000/057/original/7-1.jpg,/system/comfy/cms/files/files/000/000/056/original/7-2.jpg,/system/comfy/cms/files/files/000/000/055/original/7-3.jpg,/system/comfy/cms/files/files/000/000/054/original/7-4.jpg">
                <img class="img-responsive project-image" src="img/photo/8.jpg" alt="">
                <div class="hover-mask">
                    <h2 class="project-title">上京东抢零食</h2>
                    <p>广告</p>
                </div>
                <div class="sr-only project-description">
                    广告
                </div>
            </a>

            <a class="project-item masonry-brick" data-images="/system/comfy/cms/files/files/000/000/062/original/6.jpg,/system/comfy/cms/files/files/000/000/060/original/6-1.jpg,/system/comfy/cms/files/files/000/000/061/original/6-2.jpg">
                <img class="img-responsive project-image" src="img/photo/3.jpg" alt="">
                <div class="hover-mask">
                    <h2 class="project-title">安师傅</h2>
                    <p>广告</p>
                </div>
                <div class="sr-only project-description">
                    广告
                </div>
            </a>

            <a class="project-item masonry-brick" data-images="/system/comfy/cms/files/files/000/000/067/original/1.jpg,/system/comfy/cms/files/files/000/000/066/original/1-1.jpg,/system/comfy/cms/files/files/000/000/065/original/1-2.jpg,/system/comfy/cms/files/files/000/000/064/original/1-3.jpg,/system/comfy/cms/files/files/000/000/063/original/1-4.jpg">
                <img class="img-responsive project-image" src="img/photo/9.jpg" alt="">
                <div class="hover-mask">
                    <h2 class="project-title">M&M豆</h2>
                    <p>广告</p>
                </div>
                <div class="sr-only project-description">
                    广告
                </div>
            </a>

            <a class="project-item masonry-brick" data-images="/system/comfy/cms/files/files/000/000/070/original/2.jpg,/system/comfy/cms/files/files/000/000/068/original/2-1.jpg,/system/comfy/cms/files/files/000/000/069/original/2-2.jpg">
                <img class="img-responsive project-image" src="img/photo/14.jpg" alt="">
                <div class="hover-mask">
                    <h2 class="project-title">大众点评玩转迪拜</h2>
                    <p>网站</p>
                </div>
                <div class="sr-only project-description">
                    网站
                </div>
            </a>

        </div>
    </div>

    <div id="project-modal" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-header" data-dismiss="modal">
						<span class="close">
              <i class="fa fa-times" aria-hidden="true"></i>
            </span>
            </div>
            <div class="modal-content">
                <div class="modal-body">
                    <div id="project-img" class="project-img text-center"></div>
                    <h1 class="text-center project-title"></h1>
                    <div class="project-descr text-center"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="about">
    <div class="container">
        <div class="title">
            <h4 class="text-center">摄影名人堂</h4>
                <div></div>
        </div>
        <div id="users" class="users text-center">
            <div class="item">
                <div class="container-icon"><img src="img/photographers/1.jpg" class="img-circle"></div>
                <h4 class="quote-author">Thomas看看世界 <span></span></h4>
                <p>90后户外摄影师。公众号thomaskksj，微博@Thomas看看世界，ins：thomaschuphoto</p>
            </div>
            <div class="item">
                <div class="container-icon"><img src="img/photographers/2.jpg" class="img-circle"></div>
                <h4 class="quote-author">喵呜不停 <span></span></h4>
                <p>猫和生活摄影师。微博：喵呜不停。微信：iMiao5(个人:ibanruo)</p>
            </div>
            <div class="item">
                <div class="container-icon"><img src="img/photographers/3.jpg" class="img-circle"></div>
                <h4 class="quote-author">流氓兔视觉 <span></span></h4>
                <p>台湾著名作家吴淡如《经历过才懂得》封面摄影师,H&Y滤镜签约摄影师，约片微信：yiweir...</p>
            </div>
        </div>
    </div>
</section>

<section id="contact">
    <div class="container-fluid dark-bg text-center">
        <div class="container text-center clients">
            <i class="fa fa-5x fa-facebook-square"></i>
            <div class="gap"></div>
            <i class="fa fa-5x fa-twitter-square"></i>
            <div class="gap"></div>
            <i class="fa fa-5x fa-google-plus-square"></i>
            <div class="gap"></div>
            <i class="fa fa-5x fa-youtube"></i>
            <div class="gap"></div>
            <i class="fa fa-5x fa-weibo"></i>
            <div class="gap"></div>
        </div>
        <div id="wechat" class="contact-btn container">
            <h1 style="font-family: '微软雅黑';">联系我们</h1>
        </div>
    </div>
</section>
<%include footer.ejs%>

<!--新闻template-->
<script type="text/template" id="newsTemplate">
        <li>
            <span class="typeA">[<a href="#">{{=realtype}}</a>]</span>
            <a class="title" href="/detail/{{=uniquekey}}" title="{{=title}}">{{=title}}</a>
        </li>
</script>

<script type="text/javascript">
    //得到模板函数
    var compileNewBox=_.template($("#newsTemplate").html());
    //ajax
    $.ajax({
        "url":"http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=guonei&count=10",
        "type":"get",
        "datatype":"JSON",
        "success":function (result) {
            $("#newLoading").css("display","none");
            console.log(typeof result);
            //把string转为json
            result = eval('('+result + ')');//通过eval转换成json对象
            iterator(0);
            function iterator(i) {
                if (i == result.length) {
                    return;  //不用继续迭代了
                }
                console.log(result[i]);
                //组装模板
                let htmlstring = compileNewBox(result[i]);
                //添加DOM
                $("#newBoxOne").append($(htmlstring));
                iterator(i + 1);
            }
        }
    })
    $.ajax({
        "url":"http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=yule&count=10",
        "type":"get",
        "datatype":"JSON",
        "success":function (result) {
            $("#newLoading2").css("display","none");
            console.log(typeof result);
            //把string转为json
            result = eval('('+result + ')');//通过eval转换成json对象
            iterator(0);
            function iterator(i) {
                if (i == result.length) {
                    return;  //不用继续迭代了
                }
                console.log(result[i]);
                //组装模板
                let htmlstring = compileNewBox(result[i]);
                //添加DOM
                $("#newBoxTwo").append($(htmlstring));
                iterator(i + 1);
            }
        }
    })
    $.ajax({
        "url":"http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=guoji&count=10",
        "type":"get",
        "datatype":"JSON",
        "success":function (result) {
            $("#newLoading3").css("display","none");
            console.log(typeof result);
            //把string转为json
            result = eval('('+result + ')');//通过eval转换成json对象
            iterator(0);
            function iterator(i) {
                if (i == result.length) {
                    return;  //不用继续迭代了
                }
                console.log(result[i]);
                //组装模板
                let htmlstring = compileNewBox(result[i]);
                //添加DOM
                $("#newBoxThree").append($(htmlstring));
                iterator(i + 1);
            }
        }
    })
</script>
</body>

</html>